<template>
    <div>
        <div v-if="!isLogin">
            <div id="box">
                <span id="back" @touchstart="btnClick" class="fa fa-angle-left">
                    </span>
                        <span id="user">请先登录</span>
                        <span id="regist" @touchstart="ctnClick">注册</span>
            </div>
            <div id="outer">
                <input type="text" v-model="param.username" placeholder="手机号/邮箱/用户名">
                <br>
                <input type="password" v-model="param.psw" placeholder="密码">
                <br>
                <button @touchstart="login">登录</button>
            </div>
            <div id="footer">
                <span>手机动态密码登录</span>
                <span>忘记密码</span>

            </div>
            <div id="last">
                <div id="left"></div>
                <div id="main">其他方式登录</div>
                <div id="right"></div>
            </div>
            <div id="share">
                <span class="fa fa-qq"></span>
                <span class="fa fa-weixin"></span>
                <span class="fa fa-weibo"></span>
            </div>
        </div>

        <div  v-if="isLogin">
            <Cartlogined></Cartlogined>
        </div>
    </div>
</template>

<script>
import Cartlogined from "../components/Cartlogined.vue"
import { mapState, mapGetters } from 'vuex';
import { Toast } from 'mint-ui';
export default {
    data: function() {
        return {
            param: {
                username: "",
                psw: "",
            }
        }
    },
    computed: {
        ...mapState([
            "isLogin"
        ])
    },
    components: {
        Cartlogined
    },
    activated:function(){
        this.$store.dispatch("requestisLogin");
    },
    mounted: function() {
        this.$store.dispatch("requestisLogin");
    },

    methods: {
        btnClick: function() {
            history.back()
        },
        ctnClick: function() {
            location.hash = "/third/user/regist"
        },
        login: function() {
            this.http.post("/api/users/login", this.param)
                .then(res => {
                    if (res.data.err == "0") {
                        Toast({
                            message: '登录成功',
                            position: 'middle',
                            duration: 1000
                        });
                        location.hash = "/user/logined"
                    } else if (res.data.err == "1") {
                        Toast({
                            message: '用户名不存在',
                            position: 'middle',
                            duration: 1000
                        });
                        this.param.username = ""
                        this.param.psw = ""
                    } else if (res.data.err == "1") {
                        Toast({
                            message: '密码错误',
                            position: 'middle',
                            duration: 1000
                        });
                        this.param.username = ""
                        this.param.psw = ""

                    }

                })
        }
    }
}
</script>

<style scoped>
    #box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 7vh;
    font-size: 18px;
    border-bottom: solid 1px gainsboro;
    color: rgb(56, 56, 56)
}

#user {
    cursor: pointer;
    font-size: 18px;
    font-weight: 550;
}

#regist {
    font-size: 14px;
    font-weight: 550;
    cursor: pointer;
}

#back {
    font-size: 25px;
    /* font-weight: 500; */
    margin-left: 3vw;
    cursor: pointer;
}

input {
    width: 90%;
    height: 7vh;
    margin-left: 5vw;
    border: solid 1px gainsboro;
}

#outer {
    margin-top: 10vh;
}

button {
    cursor: pointer;
    width: 90%;
    height: 7vh;
    margin-left: 5vw;
    margin-top: 5vh;
    background-color: #FF9E93;
    border: solid 1px #FF9E93;
    border-radius: 8px;
    color: white;
    font-size: 20px;
}

#footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 1.5vh;
    font-size: 14px;
    color: rgb(56, 56, 56);
    width: 100%;
    height: 5vh;
    color: gray;
}

#last {
    margin-top: 12vh;
    display: flex;
    width: 100%;
    height: 4vh;
    justify-content: space-between;
    align-items: center;
    color: gray;
    font-size: 15px;
}

#left {
    width: 33.3vw;
    height: 1vw;
    border-bottom: solid 1px gray;
}

#right {
    width: 33.3vw;
    height: 1vw;
    border-bottom: solid 1px gray;
}

#main {
    width: 33.3vw;
    height: 5vw;
    /* margin-left: 3vw; */
    text-align: center;
    line-height: 5vw;
}

#share {
    margin-top: 3vh;
    text-align: center;
    font-size: 30px;
    color: grey;
}

#share span {
    margin: 3vw;
}
</style>